
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 10px 20px">
<div style="width: 100%;height: 100%;position: absolute;">
    <div style="height: 50%; width: 50%; float: left">
        <div id="container1" style="height: 100%"></div>
    </div>
    <div style="height: 50%; width: 50%; float: left">
        <div id="container2" style="height: 100%"></div>
    </div>
    <div style="height: 50%; width: 50%; float: left">
        <div id="container3" style="height: 100%"></div>
    </div>
    <div style="height: 50%; width: 50%; float: left">
        <div id="container4" style="height: 100%"></div>
    </div>
</div>

    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <script type="text/javascript" src="./static/js/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script>

<script type="text/javascript">

    var dom = document.getElementById('container1');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var option;

    option = {
          title: {
    text: '发文数量统计直方图',
    left: 'center'
  },
        xAxis: {
            type: 'category',
            data: [{% for p in articles_value %}'{{ p[0] }}', {% endfor %}],
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [{% for q in articles_value %}'{{ q[1] }}', {% endfor %}],
            type: 'bar'
        }]
    };


    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>

<script type="text/javascript">
    var dom = document.getElementById('container2');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
  title: {
    text: '性别的饼状图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '具体数据',
      type: 'pie',
      radius: '50%',
      data: [
        { value: '{{gender[2][1]}}', name: '男性' },
        { value: '{{gender[1][1]}}', name: '女性' },
        { value: '{{gender[0][1]}}', name: '未输入性别' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>

<script type="text/javascript">
    var dom = document.getElementById('container3');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
             text: '回答问题数量统计直方图',
             left: 'center'
         },
        xAxis: {
            type: 'category',
            data: [{% for p in answer_value %}'{{ p[0] }}', {% endfor %}]
        },
        yAxis: {
    type: 'value',
  },
        series: [{
            data: [{% for q in answer_value %}'{{ q[1] }}', {% endfor %}],
            type: 'bar'
        }]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>

<script type="text/javascript">
        var dom = document.getElementById("container4");
        var myChart = echarts.init(dom);
        var option = {

    tooltip: {
        show: true
    },
    series: [{
        type: "wordCloud",
        gridSize:6,
        shape: 'pentagon',
        // shape:'diamond',
        sizeRange: [20, 120],
        width:800,
        height:500,
        textStyle: {
            normal: {
                color: function() {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        data: [
            {% for p in name %}
            {'name': '{{ p[0] }}', 'value': '{{ p[1] }}'},
            {% endfor %}
        ]

    }]

};
        //生成图形
        myChart.setOption(option, true);
        /*if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }*/
       </script>



</body>

</html>

